<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" charset="utf-8">
        /**
         * @param sub子类
         * @param sup父类
         *
         */
        function extend(sub,sup) {
            //目的：只继承父类的原型对象
            //创建一个空函数，目的，空函数进行中转
            var F = new Function();
            //实现空函数原型对象和超类原型对象的转换
            F.prototype = sup.prototype;
            //原型继承
            sub.prototype = new F();
            //还原子类的构造器
            sub.prototype.constructor = sub;
            //保存一下父类的原型对象，一方面方便解耦，另一方面方便获得父类的原型对象
            sub.superClass = sup.prototype;  //自定义一个子类的静态属性，接收父类的原型对象
            //判断父类的原型对象的构造器
            if(sup.prototype.constructor==Object.prototype.constructor){
                //手动还原父类原型对象的构造器
                sup.prototype.constructor = sup;

            }
        }
        /**
         * 父类
         * @param name
         * @param age
         * @constructor
         */
        function Person(name,age) {
            this.name = name;
            this.age = age;
        }
        //父类属性
        Person.prototype={
            //constructor:Person,
            sayHello:function () {
                alert("HelloWorld");
            }
        }
        /**
         * 子类
         * @param sex
         * @constructor
         */
        function Boy(name,age,sex) {
            //绑定父类的模板函数，实现借用构造函数继承，只复制父类的模板
            //Person.call(this,name,age);
            Boy.superClass.constructor.call(this,name,age);

            this.sex = sex;
        }
        //原型继承，既继承父类的模板，又继承父类的原型对象
        //Boy.prototype = new Person();
        extend(Boy,Person);
        //给子类加一个原型对象方法
        Boy.prototype.sayHello = function () {
            alert('Hi javascript');
        }
        var b = new Boy('张三',20,'男');
        /**
         * 混合继承缺点：
         * 1.继承父类两次模板
         * 2.继承了父类的一次原型对象
         */
        alert(b.name);
        alert(b.age);
        alert(b.sex);
        //b.sayHello();
        //父类原型对象.方法
        Boy.superClass.sayHello();
    </script>
</head>
<body>
</body>
</html>